import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_connect/http/src/utils/utils.dart';
import 'package:yt_devops/resources/str_res_keys.dart';
import 'package:yt_devops/styles/styles.dart';
import 'package:yt_devops/utils/extensions.dart';
import 'package:yt_devops/utils/func_utils.dart';

class StorageTrendLineChart extends StatefulWidget {
  final TrendLineChartData chartData;

  const StorageTrendLineChart({
    super.key,
    required this.chartData,
  });

  @override
  State<StorageTrendLineChart> createState() => _LineChartState();
}

class _LineChartState extends State<StorageTrendLineChart> {
  bool isload = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          // CompChartLenged(widget.lineData.legend),
          Container(
            padding: EdgeInsets.only(right: 12.w),
            height: 214.h,
            child: Echarts(
              captureAllGestures: true,
              option: '''
               { 
                grid: {
                  top: 40,
                  bottom: 24,
                  right: 16,
                  left:16,
                  containLabel: true,
                },
                legend:{
                  show:true,
                  icon:'rect',
                  itemWidth:12,
                  itemHeight:3,
                  right:16,
                  itemStyle:{
                    borderCap:'round'
                  }
                   
                  
                },
                tooltip: {
                  trigger: 'axis',
                  backgroundColor: 'rgba(0,0,0,0.85)',
                  borderWidth: 0,
                  opacity: 0.2,
                  confine: true,
                  textStyle: {
                    color: 'white'
                  },
                },
                xAxis: {
                  type: 'category',
                
                 
                },
                yAxis: {
                  type: 'value',
                  name: '${ResKey.unit.tr}（${widget.chartData.unit}）',
                  nameTextStyle: {
                    padding: [0, 0, 5, 0]
                  },
                  min: ${widget.chartData.min} ?? undefined ,
                  max: ${widget.chartData.max} ?? undefined ,
                  axisLine:{
                    show:true,
                    lineStyle: {
                      color:'#999999',
                      type:'dashed'
                    }
                  },
                  splitLine:{
                    show:true,
                    lineStyle:{
                      color:'rgba(0, 0, 0, 0.09)'
                    }
                  }
                },
                xAxis: {
                  type: 'category',
                  minInterval:15,
                  alignWithLabel: true,
                  axisLine:{
                    show:true,
                    lineStyle: {
                      color:'#999999',
                      type:'dashed'
                    }
                  },
                  axisLabel:{
                    formatter: function (value, index) {
                      return value;
                    }
                  },
                },
                dataZoom: [
                  {
                    type: 'inside',
                 
                  },
                 
                ],
                series: ${getSeries()}
              }
              ''',
            ),
          )
        ],
      ),
    );
  }

  getSeries() {
    var series = widget.chartData.data
        .mapIndexed((e, i) => {
              'type': 'bar',
              'data': widget.chartData.data[i],
              'name': widget.chartData.lengend[i],
              "itemStyle": {
                'color': widget.chartData.color[i].toHex(),
                'borderColor': Colors.white.toHex()
              },
              "areaStyle": {
                'color': {
                  'type': 'linear',
                  'x': 0,
                  'y': 0,
                  'x2': 0,
                  'y2': 1,
                  'colorStops': [
                    {
                      'offset': 0,
                      'color': widget.chartData.color[i].toHex() // 0% 处的颜色
                    },
                    {
                      'offset': 1,
                      'color': Color(0x3BFFFFFF).toHex() // 100% 处的颜色
                    }
                  ],
                }
              }
            })
        .toList();

    return jsonEncode(series);
  }
}

class TrendLineChartData {
  List<List> data;
  List<Color> color;
  List<String> xAxis;
  List<String> lengend;

  double? max;
  double? min;
  String unit;

  TrendLineChartData(
      {required this.color,
      required this.data,
      required this.unit,
      required this.lengend,
      this.max,
      this.min,
      required this.xAxis});
}
